<!--
 * @Author: 李煌
 * @Date: 2023-04-25 10:57:30
 * @LastEditors: 李煌
 * @LastEditTime: 2024-02-27 15:38:40
 * @Description: 分支情况
-->
<template>
  <div
    class="branch-wrap"
    v-show="nodeConfig.conditionNodes && nodeConfig.conditionNodes.length != 0"
  >
    <div class="branch-box-wrap">
      <div
        class="branch-box"
        :style="{
          marginTop: !operationType || operationType != 'check' ? '15px' : 0,
        }"
      >
        <el-button
          type="primary"
          plain
          round
          size="small"
          class="add-branch"
          v-show="!operationType || operationType != 'check'"
          @click="addTerm"
        >
          添加条件
        </el-button>
        <div
          class="col-box"
          v-for="(item, index) in nodeConfig.conditionNodes"
          :key="index"
        >
          <div class="condition-node" :data-id="item.nodeId">
            <div class="condition-node-box">
              <!-- <div
                class="auto-judge"
                @click="openDrawer(item)"
                :class="isTried && item.error ? 'error active' : ''"
              > -->
              <div class="auto-judge" @click="openDrawer(item)">
                <div
                  class="title-wrapper"
                  :style="{
                    backgroundColor: item.type == 3 ? '#00cc33' : '#cc99cc',
                  }"
                >
                  <span class="editable-title"
                    >运营动作:{{
                      item.type === 3 ? "客户分流" : "控制策略"
                    }}</span
                  >

                  <i
                    class="el-icon-close close"
                    v-show="!operationType || operationType != 'check'"
                    @click.stop="delTerm(index)"
                  ></i>
                </div>
                <div class="content_box">
                  <div class="content_item">
                    <span>节点名称</span>
                    <span>{{ item.nodeName }}</span>
                  </div>
                  <div class="content_item" v-show="item.type === 3">
                    <span>流量分配</span>
                    <span
                      >{{
                        (item && item.nodeDetail && item.nodeDetail.num) || 0
                      }}%</span
                    >
                  </div>
                </div>
                <!-- <div class="error_tip" v-if="isTried && item.error">
                  <i
                    class="el-icon-warning"
                    style="color: rgb(242, 86, 67)"
                  ></i>
                </div> -->
              </div>
              <addNode
                v-model="nodeConfig.conditionNodes[index]"
                :ifNoShowBtn="operationType == 'check'"
              ></addNode>
            </div>
          </div>
          <nodeWrap
            v-if="item.childNode"
            v-model="item.childNode"
            :isTried.sync="isTried"
          ></nodeWrap>
          <div class="top-left-cover-line" v-if="index == 0"></div>
          <div class="bottom-left-cover-line" v-if="index == 0"></div>
          <div
            class="top-right-cover-line"
            v-if="index == nodeConfig.conditionNodes.length - 1"
          ></div>
          <div
            class="bottom-right-cover-line"
            v-if="index == nodeConfig.conditionNodes.length - 1"
          ></div>
        </div>
      </div>
      <addNode
        v-model="nodeConfig"
        :ifNoShowBtn="
          operationType == 'check' ||
          nodeConfig.type === 5 ||
          (nodeConfig.childNode && nodeConfig.childNode.type === 10)
        "
      ></addNode>
    </div>
  </div>
</template>

<script>
import mixin from "./mixin";
import { getMaxLevel } from "../..//utils/tools.js";

export default {
  mixins: [mixin],
  computed: {
    // 条件节点
    conditions: {
      get() {
        return this.nodeConfig.conditionNodes;
      },
      set(value) {
        this.nodeConfig.conditionNodes = value;
      },
    },
  },
  data() {
    return {
      operationType: "",
    };
  },
  mounted() {
    this.operationType = this.$route.query.type;
  },
  methods: {
    // 查找是否有条件节点嵌套了条件分支
    findChildIsBranch() {
      let level = getMaxLevel(this.getFlatRoot());
      if (level <= this.nodeConfig.level) {
        return true;
      }
      for (let i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
        let item = this.nodeConfig.conditionNodes[i];
        while (item.childNode) {
          if (item.childNode.type == this.$nodeType.条件分支) {
            return true;
          }
          item = item.childNode;
        }
      }
      return false;
    },
    // 设置条件的error状态
    checkCondtions() {
      for (var i = 0; i < this.conditions.length; i++) {
        this.conditions[i].error =
          this.setConditionStr(this.conditions[i], i) == "请设置条件" &&
          i != this.conditions.length - 1;
      }
    },
    //添加条件
    addTerm() {
      let type = this.$nodeType.客户分流分支;
      if (
        this.conditions.length &&
        this.conditions[0].type == this.$nodeType.经营控制分支
      ) {
        type = this.$nodeType.经营控制分支;
      }
      let len = this.conditions.length;
      this.conditions.splice(
        len,
        0,
        this.$factory.getStruct(
          this.nodeConfig.nodeId,
          type,
          null,
          this.nodeConfig.level,
          len + 1
        )
      );
      // this.checkCondtions();
    },
    // 调整条件位置
    arrTransfer(index, type = 1) {
      //  需要调整一下 默认情况是不能调整位置的
      if (type == 1 && index + 1 == this.conditions.length - 1) {
        return this.$message.error("无法移动到最后! 其他情况必须在最后");
      }
      //向左-1,向右1
      this.conditions[index] = this.conditions.splice(
        index + type,
        1,
        this.conditions[index]
      )[0];
      this.conditions.map((item, index) => {
        item.priorityLevel = index + 1;
      });
      this.checkCondtions();
    },
    //删除条件
    delTerm(index) {
      let node = this.conditions[index];
      // if (this.conditions.length > 2 && node.nodeName == "默认") {
      //   return this.$message.error("条件数量大于2的时候无法删除默认节点");
      // }
      if (this.nodeConfig.conditionNodes.length == 1) {
        // 删除跳点
        if (this.nodeConfig.childNode) {
          //  续接上一分支后需要降层次等级
          // 这句的意思是 当删除的长度为1的时候 代表整个条件节点给干掉了 要把数组第一位的链表续接到主分支下去
          if (this.nodeConfig.conditionNodes[0].childNode) {
            this.reData(
              this.conditions[0].childNode,
              this.nodeConfig.childNode
            );
          } else {
            this.conditions[0].childNode = this.nodeConfig.childNode;
          }
        }
        let node = this.conditions[0].childNode;
        if (node) {
          // 2023.12.13修复没有更新父id的问题
          node.fatherID = this.nodeConfig.fatherID;
          while (node) {
            let item = node.childNode;
            if (!item) {
              break;
            }
            if (item.type == this.$nodeType.分支跳出) {
              node.childNode = null;
            }
            node = item;
          }
          this.$emit("input", this.conditions[0].childNode);
        }
      }
      this.conditions.splice(index, 1);
      this.checkCondtions();
    },
    // 递归续接链表
    reData(data, addData) {
      if (data.level > 1) {
        data.level -= 1;
      }
      if (!data.childNode) {
        data.childNode = addData;
      } else {
        this.reData(data.childNode, addData);
      }
    },
  },
};
</script>

<style lang="less" scoped>
// 解决margin也被过渡的问题
.add-branch {
  transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
}
.content_box {
  padding: 10px;
  font-size: 14px;
  .content_item {
    width: 100%;
    display: inline-flex;
    justify-content: space-between;
    align-item: center;
    span:first-child {
      font-weight: 500;
    }
  }
}
</style>
